Éloquent JavaScript : Une introduction moderne à la programmation : Passage aux graphiques haute performance

En informatique graphique, nous faisons la distinction entre Vecteur et Bitmap graphiques. Les graphiques vectoriels (comme SVG) décrivent les images par des formes logiques ; chaque élément est un objet persistant dans le DOM. À l'inverse, les graphiques bitmap (comme HTML5 Canvas) fonctionnent avec grilles de points colorés.

1. Le passage vers Canvas

Bien que SVG soit plus facile à styliser via CSS, le navigateur doit suivre chaque nœud. Pour les besoins de haute performance, comme les jeux avec des milliers d'éléments mobiles, l'API Canvas est supérieure. Elle fournit un seul élément DOM qui encapsule une surface de dessin — essentiellement une "feuille blanche".

2. Le contexte de dessin

Le <canvas> élément est une "boîte noire" jusqu'à ce que nous initialisions son contexte. Les méthodes de cet objet fournissent l'interface réelle de dessin, dissociant l'élément d'affichage de la logique de rendu.

var contexte = canvas.getContext("2d");

3. Connaissance des espaces de noms

Dans les graphiques basés sur XML comme SVG, l'attribut xmlns="http://www.w3.org/2000/svg" est critique. Il signale au navigateur de passer du traitement standard HTML au schéma graphique spécifique, permettant aux balises de forme d'être reconnues comme des objets interactifs.

TERMINALbash — 80x24

> Ready. Click "Run" to execute.

QUESTION 1

What is the primary difference between Vector and Bitmap graphics?

Vector uses pixel data; Bitmap uses logical shapes.

Vector uses logical shape descriptions; Bitmap uses a grid of colored dots.

Vector is always faster for game rendering.

Bitmap elements remain persistent in the DOM.

QUESTION 2

What is the purpose of the xmlns attribute in an SVG tag?

To define the width and height of the viewport.

To link an external CSS stylesheet.

To change the element to a different XML namespace for specific schema recognition.

To enable hardware acceleration for bitmap rendering.

QUESTION 3

How do you access the drawing interface for an HTML5 Canvas?

By modifying the .style.color property of the canvas.

By calling the getContext('2d') method on the canvas element.

By inserting SVG tags inside the <canvas> tags.

By using the document.draw() global function.

QUESTION 4

Why does a dashboard with 10,000 data points run faster on Canvas than SVG?

Canvas uses fewer DOM nodes, reducing browser tracking overhead.

Canvas allows for better CSS styling of individual bars.

SVG cannot handle color hex codes.

Canvas automatically deletes old frames.

QUESTION 5

Once a shape is drawn to a Canvas, what happens to its 'identity'?

It can be selected and moved via standard DOM queries.

It is stored as a persistent object in the browser memory.

It becomes part of the pixel raster and loses its individual identity.

It is automatically converted to an SVG path.